<template>
	<view class="main">
		<u-navbar :is-back="true" :title="i18n.navbar.commodity_details" :background="background" :border-bottom="false"
			title-color="#000000" back-icon-color="#000"></u-navbar>

		<view class="alls">
			<view class="tabs">
				<view class="tab" v-for="(item,index) in i18n.commodity.commodity_details.tablist" :key="index">
					<view :class="ide==index?'tabconted':'tabcont'" @click="changetab(index)">
						<text>{{item}}</text>
						<view class="xian"></view>
					</view>
					<view class="borl">
					</view>
				</view>
			</view>

			<view class="shopinfo" v-if="ide==0">
				<view class="shopname">
					<view class="shoptitle">
						{{i18n.commodity.commodity_details.shop_tit}}
					</view>
					<!-- <text>{{shopdetails.storeName}}</text> -->
					<textarea maxlength="-1" v-model="shopdetails.storeName" />
				</view>
				<view class="shopname2" @click="showselect(0)">
					<view>{{i18n.commodity.commodity_details.categories}}</view>
					<view class="shopname2_r">
						<text v-for="(shoptype,index2) in showshoptype" :key="index2">{{shoptype.name}}</text>
					</view>
				</view>
				<view class="shopname2" @click="showselect(1)">
					<view>{{i18n.commodity.commodity_details.type}}</view>
					<text>{{pctype}}</text>
				</view>
				<view class="shopname2" @click="showselect(2)">
					<view>{{i18n.commodity.commodity_details.brand}}</view>
					<text>{{brand}}</text>
				</view>
				<view class="service">
					<text>
						{{i18n.commodity.commodity_details.service}}
					</text>
					<scroll-view scroll-x="true" class="scrollw">
						<view class="servcont">
							<view class="oneof" v-for="(item,index) in services" :key="index">
								<view class="of">
									{{item.name}}
								</view>
								<image src="../../../static/images/del.png" mode="" @click="remove(index)"></image>
							</view>
							<view class="oneof2" v-if="services.length<4" @click="showaddserve">
								添加保障
							</view>
						</view>
					</scroll-view>

				</view>
				<view class="shopname">
					<view class="shoptitle">
						{{i18n.commodity.commodity_details.shop_introduction}}
					</view>
					<textarea maxlength="-1" v-model="shopdetails.storeInfo"></textarea>
				</view>

				<view class="botimg">
					<view class="cover">
						<text>{{i18n.commodity.commodity_details.cover_picture}}</text>
						<view class="carousel">
							<image v-if="shopdetails.image!=''" :src="shopdetails.image" mode=""></image>
							<image v-if="shopdetails.image!=''" class="removedel" src="../../../static/images/del.png"
								mode="" @click="removecover"></image>
							<text v-if="shopdetails.image==''" @click="upimg(1)">请上传图片</text>
						</view>
					</view>
					<view class="cover">
						<text>{{i18n.commodity.commodity_details.carousel}}</text>
						<view class="carousel">
							<view class="cover" v-for="(item,index) in carousel" :key="index">
								<image :src="item" mode=""></image>
								<image class="removedel2" src="../../../static/images/del.png" mode=""
									@click="removeswiper(index)"></image>
								<!-- <text v-if="carousel.length<5" @click="upimg(2)">请上传图片</text> -->
							</view>
							<view class="cover">
								<text v-if="carousel.length<5" @click="upimg(2)">请上传图片</text>
							</view>
						</view>
					</view>
				</view>

			</view>

			<!-- 商品属性 -->
			<view class="shopattributes" v-if="ide==1">
				<view class="freight">
					<view>{{i18n.commodity.commodity_details.freight}}</view>
					<text>1</text>
				</view>
				<view class="freight">
					<view>{{i18n.commodity.commodity_details.discount}}</view>
					<text>无</text>
				</view>
				<view class="specification">
					{{i18n.commodity.commodity_details.specification}}
				</view>

				<view class="content" v-for="(item,index) in shopdetails.attrValue">
					<view class="cont_t">
						<view class="cont_l">
							<image :src="item.image" mode=""></image>
						</view>
						<view class="cont_r">
							<view class="type_t">
								<view class="typedetails">
									{{item.sku}}
								</view>
								<text>{{i18n.commodity.commodity_details.color}}</text>
							</view>
							<view class="type_t">
								<view class="typedetails">
									<!-- {{item.volume}} -->
									<input type="text" v-model="item.volume">
								</view>
								<text>{{i18n.commodity.commodity_details.volume}}</text>
							</view>
							<view class="type_t">
								<view class="typedetails">
									<!-- {{item.weight}} -->
									<input type="text" v-model="item.weight">
								</view>
								<text>{{i18n.commodity.commodity_details.weight}}</text>
							</view>
						</view>
					</view>
					<view class="money">
						<view class="commercial_price">
							<text>{{i18n.commodity.commodity_details.selling_price}}：</text>
							<view class="moneys"> <text>¥</text> <input type="number" v-model="item.price" /></view>
						</view>
						<view class="commercial_price">
							<text>{{i18n.commodity.commodity_details.cost}}：</text>
							<view class="moneys">¥{{item.cost}}</view>
						</view>
						<view class="commercial_price">
							<text>{{i18n.commodity.commodity_details.original_price}}：</text>
							<view class="moneys"><text>¥</text> <input type="number" v-model="item.otPrice" /></view>
						</view>
					</view>
					<view class="in_stock">
						<text>{{i18n.commodity.commodity_details.stock}}：</text>
						<view class="stocknum">
							<input type="number" v-model="item.stock" />
						</view>
					</view>

				</view>
			</view>
			<!-- 详情 富文本 -->
			<view class="shop_details" v-if="ide==2">
				<u-parse :html="shopdetails.content"></u-parse>
			</view>
		</view>
		<view class="infobut">
			<view class="infosub" @click="select(1)">
				{{i18n.commodity.commodity_details.submit}}
			</view>
			<view class="infodel" @click="select(2)">
				{{i18n.commodity.commodity_details.bin}}
			</view>
		</view>
		<u-select v-model="brandtype" mode="single-column" label-name="name" value-name="id" :list="inbrand"
			@confirm="brandconfirm"></u-select>
		<u-popup v-model="type" mode="bottom" height="500rpx">
			<u-checkbox-group @change="checkboxGroupChange">
				<u-checkbox @change="checkboxChange(item,item.id)" v-model="item.checked"
					v-for="(item, index) in shoptypelist" :key="index" :name="item.name">
					<text>{{item.name}} </text>
				</u-checkbox>
			</u-checkbox-group>
		</u-popup>
		<u-select v-model="shoptype" mode="mutil-column-auto" :list="treelist" value-name="id" label-name="name"
			child-name="childList" @confirm="confirm2"></u-select>

		<u-popup v-model="del" mode="center" width="600" height="380" border-radius="20">
			<view class="mdtitle">
				{{i18n.commodity.commodity_details.tips}}
			</view>
			<text class="wb">{{txt}}</text>
			<view class="mdbuts">
				<view class="but_l" @click="confirm(1)">
					确定
				</view>
				<view class="but_r" @click="confirm(2)">
					取消
				</view>
			</view>
		</u-popup>
		<u-select v-model="serves" mode="single-column" :list="addserlist" @confirm="confirmservice" label-name="name"
			value-name="id"></u-select>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#fff',
				},
				ide: 0,
				tablist: ['商品信息', '商品属性', '商品详情'],
				shopdetails: '',
				carousel: [],
				brand: '',
				type: false,
				services: [],
				addserlist: [],
				treelist: [],
				brandtype: false,
				allbrand: [],
				shoptype: false,
				list: '',
				pctype: '',
				brandid: '',
				inbrand: [],
				del: false,
				txt: '',
				status: '',
				shopid: '',
				shoptypelist: [],
				showshoptype: [],
				serves: false,
				stringarr: [],
				subserve:[]



			}
		},
		computed: {
			i18n() {
				return this.$t('message')
			},
		},
		onLoad(data) {
			this.shopid = data.id
			this.getdetails(JSON.parse(data.id))
			console.log(data);
			this.getservices()
			this.getallbrand()
			this.getbrandtype()
			this.getshoptype()

		},
		onShow() {
			this.lang()
		},
		methods: {
			confirm2(e) {
				console.log(e);
				this.pctype = e[2].label
				this.shopdetails.categoryId=e[2].value
				this.brandid = e[2].value
				this.getbrand()
			},
			checked(id) {
				console.log(id);
			},
			//删除轮播图
			removeswiper(index) {
				this.carousel.splice(index, 1)
			},

			select(index) {
				this.status = index
				this.del = true
				if (index == 1) {
					this.txt = this.i18n.commodity.commodity_details.txt4
				} else if (index == 2) {
					this.txt = this.i18n.commodity.commodity_details.txt
				}
			},
			confirm(index) {
				if (this.status == 1) {
					this.upadate()
					console.log(this.shopdetails);
					if (index == 1) {
						this.del = false
					} else if (index == 2) {
						this.del = false
					}
				} else if (this.status == 2) {
					if (index == 1) {
						this.join_del()
						this.del = false
					} else if (index == 2) {
						this.del = false
					}
				}
			},
			//提交修改
			upadate() {
				// 
				global.$http.request({
					url: '/api/admin/merchant/product/update',
					header: {
						'Authori-zation': uni.getStorageSync('token') //自定义请求头信息
					},
					data: {
						...this.shopdetails
					}
				}).then(res => {
					if (res.data.code == 200) {
						uni.showToast({
							title: res.data.message,
							icon: 'none',
							duration: 1000
						})
						setTimeout(function() {
							uni.navigateBack({
								delta: 1,
								success: () => {
									let page = getCurrentPages().pop(); //跳转页面成功之后
									if (page) {
										let e = {};
										page.onLoad(e); //执行上个页面的方法

									};
								}
							})
						}, 1000)
					}
				})
			},

			//加入回收站
			join_del() {
				global.$http.request({
					url: '/api/admin/merchant/product/delete/' + this.shopid,
					method: 'GET',
					header: {
						'Authori-zation': uni.getStorageSync('token') //自定义请求头信息
					},
				}).then(res => {
					if (res.data.code == 200) {
						uni.showToast({
							title: res.data.message,
							icon: 'none',
							duration: 1000
						})
						setTimeout(function() {
							uni.navigateBack({
								delta: 1,
								success: () => {
									let page = getCurrentPages().pop(); //跳转页面成功之后
									if (page) {
										let e = {};
										page.onLoad(e); //执行上个页面的方法

									};
								}
							})
						}, 1000)
					}
				})
			},
			//上传图片
			upimg(index) {
				var that = this
				uni.chooseImage({
					count: 5,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						global.$http.upload('/api/admin/merchant/upload/image', {
							params: {
								model: 'user',
								pid: '0'
							},
							/* 会加在url上 */
							filePath: tempFilePaths[0], // 要上传文件资源的路径。
							name: 'multipart', // 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
							formData: {}, // HTTP 请求中其他额外的 form data
						}).then(res => {
							console.log(res.data.data.url);
							if (index == 1) {
								this.shopdetails.image = res.data.data.url
							} else if (index == 2) {
								console.log(this.carousel);
								this.carousel.push(res.data.data.url)
								this.shopdetails.sliderImage=JSON.stringify(this.carousel)
							}
						})
					}
				});
			},

			// 选中任一checkbox时，由checkbox-group触发
			checkboxGroupChange(e) {
				// console.log(e);
				this.list = e
			},


			//根据穿的值弹出层
			showselect(index) {
				if (index == 0) {
					this.type = true
				} else if (index == 1) {
					this.shoptype = true
				} else if (index == 2) {
					this.brandtype = true
				}
			},
			//获取详情信息
			getdetails(id) {
				global.$http.request({
					url: '/api/admin/merchant/product/info/' + id,
					method: 'GET',
					header: {
						'Authori-zation': uni.getStorageSync('token') //自定义请求头信息
					},
				}).then(res => {
					if (res.data.code == 200) {
						this.shopdetails = res.data.data
						// this.getbrand(res.data.data.categoryId)
						console.log(this.shopdetails);
						this.brandid = this.shopdetails.categoryId
						this.getbrand()
						this.carousel = JSON.parse(res.data.data.sliderImage)

					}
				})
			},
			//服务保障
			getservices() {
				global.$http.request({
					url: '/api/admin/merchant/product/guarantee/list',
					method: 'GET',
					header: {
						'Authori-zation': uni.getStorageSync('token') //自定义请求头信息
					},
				}).then(res => {
					if (res.data.code == 200) {
						// console.log('保障服务', res.data.data);
						this.services = res.data.data
						this.addserlist = JSON.parse(JSON.stringify(res.data.data))
						for(let i=0;i<res.data.data.length;i++){
							this.subserve.push(res.data.data[i].id)
							console.log('默认服务',this.subserve);
						}
						

					}
				})
			},
			//确定添加服务
			confirmservice(e) {
				for (let i = 0; i < this.addserlist.length; i++) {
					if (e[0].value == this.addserlist[i].id) {
						for(let a=0;a<this.services.length;a++){
							if(this.addserlist[i].id!=this.services[a].id){
								this.services.push(this.addserlist[i])
								this.subserve.push(this.addserlist[i].id)
								this.shopdetails.guaranteeIds=this.segmentation(this.subserve)
								console.log(this.shopdetails.guaranteeIds);
								break
							}else{
								uni.showToast({
									title:'请勿重复添加',
									icon:'none',
									duration:500
								})
								break
							}
						}
					}
				}
			
			},
			//添加保障服务
			showaddserve() {
				this.serves = true
				
			},
			//删除服务
			remove(index) {
				this.services.splice(index, 1)
			    this.subserve.splice(index, 1)
				this.shopdetails.guaranteeIds=this.segmentation(this.subserve)
			},
			//获取品牌信息
			getbrand() {
				global.$http.request({
					url: '/api/admin/merchant/product/brand/list',
					method: 'GET',
					header: {
						'Authori-zation': uni.getStorageSync('token') //自定义请求头信息
					},
					data: {
						cid: this.brandid
					}
				}).then(res => {
					if (res.data.code == 200) {
						// console.log(res.data);
						if (res.data.data.list.length < 1) {
							uni.showToast({
								title: '此分类下面无品牌',
								icon: 'none',
								duration: 1000
							})
							this.brand = ''
						} else {
							this.inbrand = res.data.data.list
						}
					}
				})
			},
			//获取全部品牌信息
			getallbrand() {
				global.$http.request({
					url: '/api/admin/merchant/product/brand/cache/list',
					method: 'GET',
					header: {
						'Authori-zation': uni.getStorageSync('token') //自定义请求头信息
					},
					data: {}
				}).then(res => {
					if (res.data.code == 200) {

						for (let i = 0; i < res.data.data.length; i++) {
							if (this.shopdetails.brandId == res.data.data[i].id) {
								this.brand = res.data.data[i].name
							}
						}
					}
				})
			},
			//获取商户分类
			getshoptype() {
				global.$http.request({
					url: '/api/admin/merchant/store/product/category/cache/tree',
					method: 'GET',
					header: {
						'Authori-zation': uni.getStorageSync('token') //自定义请求头信息
					},
					data: {}
				}).then(res => {
					if (res.data.code == 200) {
						this.shoptypelist = res.data.data
						let array = []
						this.shoptypelist.map((item, index) => {
							array.push(
								Object.assign(item, {
									checked: false
								})
							)
						});
						this.shoptypelist = array
						console.log('默认的', this.shoptypelist);
						//循环找到默认值
						var result = this.shopdetails.cateId.split(",");

						for (let k = 0; k < result.length; k++) {
							for (var i = 0; i < res.data.data.length; i++) {
								if (res.data.data[i].id == Number(result[k])) {
									this.stringarr.push(res.data.data[i].id)
									console.log('默认加载商户分类id', this.stringarr);
									this.showshoptype.push(res.data.data[i])
								}
							}
						}
						//选中的打上勾
						for (var c = 0; c < this.shoptypelist.length; c++) {
							for (let l = 0; l < this.showshoptype.length; l++) {
								if (this.shoptypelist[c].id == this.showshoptype[l].id) {
									console.log(this.shoptypelist[c]);
									this.shoptypelist[c].checked = true
								}
							}
						}

					}
				})
			},
			//以，分割数组
			segmentation(arr){
				var str=''
				for (let m = 0; m < arr.length; m++) {
					str += arr[m] + ",";
				}
				if (str.length > 0) {
					str = str.substr(0, str.length - 1);
				}
				return str
			},
			// 选中某个复选框时，由checkbox时触发
			checkboxChange(e, index) {
				var str = ''
				if (!e.checked) {
					this.showshoptype.push(e)
					this.stringarr.push(e.id)
			
					this.shopdetails.cateId = this.segmentation(this.stringarr)
				} else if (e.checked) {
					// this.showshoptype.splice(index,1)
					console.log(this.showshoptype.length);
					for (let i = 0; i < this.showshoptype.length; i++) {
						if (this.showshoptype[i].id == index) {
							this.showshoptype.splice(i, 1)
							this.stringarr.splice(i, 1)
							this.shopdetails.cateId = this.segmentation(this.stringarr)
							break;
						}
					}
				}
				console.log(this.showshoptype);
			},
			//获取平台商品分类
			getbrandtype() {
				global.$http.request({
					url: '/api/admin/merchant/product/category/cache/tree',
					method: 'GET',
					header: {
						'Authori-zation': uni.getStorageSync('token') //自定义请求头信息
					},
				}).then(res => {
					if (res.data.code == 200) {
						this.treelist = res.data.data

						// console.log('商户分类', res.data.data);
						var that = this
						for (let i = 0; i < res.data.data.length; i++) {
							for (let j = 0; j < res.data.data[i].childList.length; j++) {
								for (let k = 0; k < res.data.data[i].childList[j].childList.length; k++) {
									if (this.shopdetails.categoryId == res.data.data[i].childList[j].childList[k]
										.id) {
										this.pctype = res.data.data[i].childList[j].childList[k].name
										// console.log(res.data.data[i].childList[j].childList[k].id);
									}
								}
							}
						}
					}
				})
			},
			//删除封面图
			removecover() {
				this.shopdetails.image = ''
			},

			lang() {
				this._i18n.locale = uni.getStorageSync('select')
			},
			changetab(index) {
				this.ide = index
				// console.log(this.ide);
			},
			brandconfirm(e) {
				console.log(e);
				this.brand = e[0].label
				this.shopdetails.brandId=e[0].value
			},

		}
	}
</script>
<style lang="scss">
	page {
		background-color: #f7f7f7;
		padding-bottom: 130rpx;

		.main {
			width: 750rpx;
			height: 100%;

			.alls {
				.tabs {
					width: 750rpx;
					display: flex;
					align-items: center;
					background-color: #fff;
					height: 88rpx;

					.tab {
						// width: 249rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.tabcont {
							width: 250rpx;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: space-between;
							position: relative;

							// .xian {
							// 	width: 40rpx;
							// 	height: 4rpx;
							// 	background: #FF0000;
							// 	position: absolute;
							// 	top: 57rpx;
							// }
						}

						.tabconted {
							width: 250rpx;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: space-between;
							position: relative;
							color: #FF0000;

							.xian {
								width: 40rpx;
								height: 4rpx;
								background: #FF0000;
								position: absolute;
								top: 57rpx;
							}
						}

						.borl {
							width: 2rpx;
							height: 24rpx;
							background: #CCCCCC;


						}

					}


				}


				.shopinfo {
					margin-top: 10rpx;

					.shopname {
						background-color: #fff;
						margin-bottom: 2rpx;
						padding: 29rpx 67rpx 36rpx 22rpx;

						.shoptitle {
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #808080;
							padding-bottom: 28rpx;
						}

						textarea {
							font-size: 30rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #000000;
							line-height: 50rpx;
							height: 220rpx;
							padding: 5rpx;
						}

						text {
							font-size: 30rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #000000;
							line-height: 50rpx;
						}
					}

					.shopname2 {
						padding: 28rpx 23rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						background-color: #fff;
						margin-bottom: 2rpx;

						view {
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #808080;
						}


						.shopname2_r {
							// display: flex;
							align-items: center;

							text {
								display: block;
								font-size: 28rpx;
								font-family: PingFang SC;
								font-weight: 400;
								color: #000000;
							}
						}
					}

					.service {
						background-color: #fff;
						margin-bottom: 2rpx;

						text {
							display: block;
							margin: 20rpx 0 0rpx 23rpx;
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #808080;
						}

						.scrollw {
							width: 98%;
							margin: 0 auto;

							.servcont {

								display: flex;
								align-items: center;
								padding: 0 25rpx;

								.oneof2 {
									margin: 24rpx 20rpx 14rpx 0;
									padding: 12rpx 15rpx;
									background: #304156;
									font-size: 22rpx;
									font-family: PingFang SC;
									font-weight: 400;
									color: #FFFFFF;
								}

								.oneof {
									padding-top: 24rpx;
									position: relative;

									.of {
										white-space: nowrap;
										margin: 0 20rpx 14rpx 0;
										padding: 12rpx 15rpx;
										background: #304156;
										font-size: 22rpx;
										font-family: PingFang SC;
										font-weight: 400;
										color: #FFFFFF;
									}

									image {
										position: absolute;
										right: 7rpx;
										top: 6rpx;
										width: 30rpx;
										height: 30rpx;
									}

								}
							}
						}

					}

					.botimg {
						padding: 0 24rpx;

						.cover {
							text {
								padding: 25rpx 0;
								display: block;
								font-size: 28rpx;
								font-family: PingFang SC;
								font-weight: 400;
								color: #304156;
							}

							.carousel {
								display: flex;
								align-items: center;
								flex-wrap: wrap;
								position: relative;

								text {
									margin-bottom: 10rpx;
									display: block;
									width: 150rpx;
									text-align: center;
									line-height: 100rpx;
									height: 150rpx;
									background: #FFFFFF;
									border: 1rpx solid #B3B3B3;
									font-size: 24rpx;
									font-family: PingFang SC;
									font-weight: 400;
									color: #B2B2B2;
								}

								.removedel {
									width: 30rpx;
									height: 30rpx;
									position: absolute;
									left: 145rpx;
									top: -15rpx;
								}

								.cover {
									position: relative;

									.removedel2 {
										width: 30rpx;
										height: 30rpx;
										position: absolute;
										left: 145rpx;
										top: -15rpx;
										z-index: 99;
									}
								}


								image {
									margin: 0 10rpx 10rpx 0;
									width: 160rpx;
									height: 160rpx;
								}
							}

						}
					}


				}

				.shopattributes {
					margin-top: 10rpx;

					.freight {
						display: flex;
						justify-content: space-between;
						padding: 28rpx 28rpx 28rpx 22rpx;
						background-color: #fff;
						margin-bottom: 2rpx;

						view {
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #808080;
						}

						text {
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #000000;
						}
					}

					.specification {
						padding: 27rpx 23rpx;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #304156;
					}

					.content {
						background-color: #fff;
						padding: 26rpx 0;
						margin-bottom: 10rpx;

						.cont_t {
							padding-bottom: 24rpx;
							border-bottom: 2rpx solid #f7f7f7;
							margin: 0 23rpx;
							display: flex;
							align-items: center;

							.cont_l {
								image {
									width: 160rpx;
									height: 160rpx;
								}
							}

							.cont_r {
								display: flex;
								justify-content: space-between;
								align-items: center;
								padding-left: 36rpx;
								width: 550rpx;

								.type_t {
									display: flex;
									flex-direction: column;
									align-items: center;

									.typedetails {
										width: 140rpx;
										height: 62rpx;
										background: #F2F2F2;
										text-align: center;
										line-height: 62rpx;
										font-size: 26rpx;
										font-family: PingFang SC;
										font-weight: 400;
										color: #000000;

										input {
											height: 62rpx;

										}

									}

									text {
										display: block;
										padding: 23rpx 0;
										font-size: 24rpx;
										font-family: PingFang SC;
										font-weight: 400;
										color: #808080;
									}
								}
							}
						}

						.money {
							margin: 17rpx 22rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;
							border-bottom: 2rpx solid #f7f7f7;
							padding-bottom: 17rpx;

							.commercial_price {
								display: flex;
								align-items: center;


								text {
									font-size: 28rpx;
									font-family: PingFang SC;
									font-weight: 400;
									color: #808080;
								}

								.moneys {
									display: flex;
									align-items: center;

									width: 130rpx;
									font-size: 24rpx;
									font-family: PingFang SC;
									font-weight: 400;
									color: #000000;
									text-align: center;
									line-height: 48rpx;
									padding: 0 5rpx;
									height: 48rpx;
									background: #F2F2F2;

									input {
										width: 120rpx;
										height: 48rpx;
									}
								}
							}
						}

						.in_stock {
							padding: 28rpx 22rpx;
							display: flex;
							align-items: center;

							text {
								font-size: 28rpx;
								font-family: PingFang SC;
								font-weight: 400;
								color: #808080;
							}

							.stocknum {
								width: 615rpx;
								height: 48rpx;
								line-height: 48rpx;
								background: #F2F2F2;
								padding-left: 19rpx;
							}
						}
					}

					.infobut {
						position: fixed;
						bottom: 0;
						width: 750rpx;
						display: flex;
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						text-align: center;
						line-height: 98rpx;

						.infosub {
							width: 50%;
							height: 98rpx;
							background: #0F82FF;
						}

						.infodel {
							width: 50%;
							height: 98rpx;
							background: #304156;
						}
					}
				}

				.shop_details {
					margin-top: 10rpx;

					.detailsimg {
						image {
							width: 750rpx;
							height: 100vh;
						}
					}

					.infobut {
						position: fixed;
						bottom: 0;
						width: 750rpx;
						display: flex;
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						text-align: center;
						line-height: 98rpx;

						.infosub {
							width: 50%;
							height: 98rpx;
							background: #0F82FF;
						}

						.infodel {
							width: 50%;
							height: 98rpx;
							background: #304156;
						}
					}
				}



			}

			.infobut {
				position: fixed;
				bottom: 0;
				width: 750rpx;
				display: flex;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				text-align: center;
				line-height: 98rpx;

				.infosub {
					width: 50%;
					height: 98rpx;
					background: #0F82FF;
				}

				.infodel {
					width: 50%;
					height: 98rpx;
					background: #304156;
				}
			}

			.mdtitle {
				padding-top: 52rpx;
				font-size: 34rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #000000;
				text-align: center;
			}

			.wb {
				display: block;
				text-align: center;
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
				padding: 40rpx 0 59rpx 0;
			}

			.mdbuts {
				line-height: 64rpx;
				text-align: center;
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
				display: flex;
				justify-content: space-around;
				padding: 0 90rpx;

				.but_l {
					width: 160rpx;
					height: 64rpx;
					background: #304156;
					border-radius: 32rpx;
				}

				.but_r {
					width: 160rpx;
					height: 64rpx;
					background: #B3B3B3;
					border-radius: 32rpx;
				}
			}

			.showright {
				padding-left: 14rpx;

				.scree_tit {
					padding: 78rpx 0 64rpx 0;
					font-size: 40rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
				}

				.smtit {
					padding-bottom: 23rpx;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
				}

				.selects {
					padding: 30rpx 10rpx;
					margin: 0 15rpx 65rpx 0;
					display: flex;
					justify-content: space-between;
					align-items: center;
					background: #F0F0F0;
					border-radius: 10rpx;

					text {

						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #B3B3B3;
					}

					input {
						// background: #F0F0F0;
						// border-radius: 10rpx;
					}

					image {
						width: 10rpx;
						height: 16rpx;
					}
				}

				.rightbut {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 34rpx;
					font-family: PingFang SC;
					line-height: 92rpx;
					text-align: center;
					padding: 0 25rpx;

					.rightconfim {
						width: 240rpx;
						height: 92rpx;
						border: 2rpx solid #999999;
						border-radius: 46rpx;
						font-weight: 400;
						color: #999999;
					}

					.rightoff {
						width: 240rpx;
						height: 92rpx;
						background: #304156;
						border-radius: 46rpx;

						color: #FFFFFF;

					}
				}
			}
		}
	}
</style>
